import React, { Component } from "react";

import { Tree } from "ant-design-vue";

import { fetchVariableParamsList } from "../../reducer/modules/interfaceCol.js";

const TreeNode = Tree.TreeNode;
const CanSelectPathPrefix = "CanSelectPath-";

function deleteLastObject(str) {
	return str.split(".").slice(0, -1).join(".");
}

function deleteLastArr(str) {
	return str.replace(/\[.*?\]/g, "");
}

@connect(
	state => {
		return {
			currColId: state.interfaceCol.currColId
		};
	},
	{
		fetchVariableParamsList
	}
)
class VariablesSelect extends Component {
	static propTypes = {
		click: PropTypes.func,
		currColId: PropTypes.number,
		fetchVariableParamsList: PropTypes.func,
		clickValue: PropTypes.string,
		id: PropTypes.number
	};
	state = {
		records: [],
		expandedKeys: [],
		selectedKeys: []
	};

	handleRecordsData(id) {
		let newRecords = [];
		this.id = id;
		for (let i = 0; i < this.records.length; i++) {
			if (this.records[i]._id === id) {
				break;
			}
			newRecords.push(this.records[i]);
		}
		this.setState({
			records: newRecords
		});
	}

	async componentDidMount() {
		const { currColId, fetchVariableParamsList, clickValue } = this.props;
		let result = await fetchVariableParamsList(currColId);
		let records = result.payload.data.data;
		this.records = records.sort((a, b) => {
			return a.index - b.index;
		});
		this.handleRecordsData(this.props.id);

		if (clickValue) {
			let isArrayParams = clickValue.lastIndexOf("]") === clickValue.length - 1;
			let key = isArrayParams
				? deleteLastArr(clickValue)
				: deleteLastObject(clickValue);
			this.setState({
				expandedKeys: [key],
				selectedKeys: [CanSelectPathPrefix + clickValue]
			});
			// this.props.click(clickValue);
		}
	}

	async componentWillReceiveProps(nextProps) {
		if (this.records && nextProps.id && this.id !== nextProps.id) {
			this.handleRecordsData(nextProps.id);
		}
	}

	handleSelect = key => {
		this.setState({
			selectedKeys: [key]
		});
		if (key && key.indexOf(CanSelectPathPrefix) === 0) {
			key = key.substr(CanSelectPathPrefix.length);
			this.props.click(key);
		} else {
			this.setState({
				expandedKeys: [key]
			});
		}
	};

	onExpand = keys => {
		this.setState({ expandedKeys: keys });
	};

	render() {
		const pathSelctByTree = (data, elementKeyPrefix = "$", deepLevel = 0) => {
			let keys = Object.keys(data);
			let TreeComponents = keys.map((key, index) => {
				let item = data[key],
					casename;
				if (deepLevel === 0) {
					elementKeyPrefix = "$";
					elementKeyPrefix = elementKeyPrefix + "." + item._id;
					casename = item.casename;
					item = {
						params: item.params,
						body: item.body
					};
				} else if (Array.isArray(data)) {
					elementKeyPrefix =
						index === 0
							? elementKeyPrefix + "[" + key + "]"
							: deleteLastArr(elementKeyPrefix) + "[" + key + "]";
				} else {
					elementKeyPrefix =
						index === 0
							? elementKeyPrefix + "." + key
							: deleteLastObject(elementKeyPrefix) + "." + key;
				}
				if (item && typeof item === "object") {
					const isDisable = Array.isArray(item) && item.length === 0;
					return (
						<TreeNode
							key={elementKeyPrefix}
							disabled={isDisable}
							title={casename || key}>
							{pathSelctByTree(item, elementKeyPrefix, deepLevel + 1)}
						</TreeNode>
					);
				}
				return (
					<TreeNode key={CanSelectPathPrefix + elementKeyPrefix} title={key} />
				);
			});

			return TreeComponents;
		};

		return (
			<div class="modal-postman-form-variable">
				<Tree
					expandedKeys={this.state.expandedKeys}
					selectedKeys={this.state.selectedKeys}
					onSelect={([key]) => this.handleSelect(key)}
					onExpand={this.onExpand}>
					{pathSelctByTree(this.state.records)}
				</Tree>
			</div>
		);
	}
}

export default VariablesSelect;
